import { Input, Select } from 'antd';
import React from 'react';
import styles from './index.less';

interface EditableFieldProps {
  value: string | number;
  isEditing: boolean;
  onChange?: (value: string) => void;
  type?: 'input' | 'select';
  options?: Array<{ label: string; value: string }>;
  loading?: boolean;
}

export const EditableField: React.FC<EditableFieldProps> = ({
  value,
  isEditing,
  onChange,
  type = 'input',
  options = [],
  loading = false,
}) => {
  if (!isEditing) {
    return (
        <Input value={value} readOnly className={styles['readonly-input']} size="small" />
    );
  }

  const commonStyle = {
    height: '24px',
    fontSize: '12px',
    marginBottom: '4px',
  };


  if (type === 'select') {
    return (
      <Select
          value={value as string}
          onChange={onChange}
          style={{ width: '100%', ...commonStyle }}
          options={options}
          loading={loading}
          size="small"
          className={styles['editable-input']}
          dropdownMatchSelectWidth={true}
      />
    );
  }

  return (
    <Input
        value={value}
        onChange={(e) => onChange?.(e.target.value)}
        className={styles['editable-input']}
        size="small"
        style={commonStyle}
    />
  );
};
